import React, { memo, useEffect,useRef } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { Carousel } from "antd";
import "./index.scss";

import actions from "store/action/recommend";

import WYThemeHeaderRCM from "components/theme-header-rcm";
import WYAlbumCover from "components/album-cover";

const WYNewAlbum = memo(function (props) {
  //redux
  const dispatch = useDispatch();
  const newAlbumAry = useSelector(
    (state) => state.getIn(["recommend", "newAlbums"]),
    shallowEqual
  );
//   other hooks 
const pageRef = useRef();

  useEffect(() => {
    dispatch(actions.getNewAlbums({ limit: 10 }));
  }, [dispatch]);

  return (
    <div className="new-album">
      <WYThemeHeaderRCM title="新碟上架" />
      <div className="content">
        {/* 按钮上 */}
        <button className="arrow arrow-left sprite_02" onClick={e=>pageRef.current.prev()}></button>
        {/* 走马灯 */}
        <div className="album">
          <Carousel dots={false} ref={pageRef}>
            {[0, 1].map((item, index) => (
              <div key={index} className="page">
                {newAlbumAry.slice(item * 5, (item + 1) * 5).map((i) => (
                  <WYAlbumCover key={i.id} info={i}/>
                ))}
              </div>
            ))}
          </Carousel>
        </div>
        {/* 按钮xia */}
        <button className="arrow arrow-right sprite_02" onClick={e=>pageRef.current.next()}></button>
      </div>
    </div>
  );
});

export default WYNewAlbum;
